<template>
  <div>
    <view class="list">
      <u-radio-group v-model="active" placement="column" @change="groupChange">
        <view class="item" v-for="item of AddressList" :key="item.id">
          <view class="header">
            <view class="address-name">收货人：{{ item.consignee }}</view>
            <view class="address-name">手机号码：{{ item.mobile }}</view>
          </view>
          <view class="city"
            >所在地区：{{ item.provinces.name }}-{{ item.citys.name }}-{{
              item.districts.name
            }}</view
          >
          <view class="address">详细地址：{{ item.address }}</view>
          <view class="btn-box">
            <view class="left-btn">
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                label="设置默认地址"
                :name="item.id"
              >
              </u-radio>
            </view>
            <view class="right-btn">
              <view class="edit" @click="addressEdit(item.id)">
                <span>
                  <image src="/static/images/icons/edit.png"></image>
                </span>
                <span>编辑</span>
              </view>
              <view class="del" @click="addressDel(item.id)">
                <span>
                  <image src="/static/images/icons/del.png"></image>
                </span>
                <span>删除</span>
              </view>
            </view>
          </view>
        </view>
      </u-radio-group>
    </view>

    <!-- 底部添加地址 -->
    <!-- <button class="address-btn" bindtap="onAddress">添加地址</button> -->
    <u-button
      type="primary"
      :custom-style="addressBtn"
      text="添加地址"
      @click="addressadd"
    ></u-button>
    <!-- 信息提示 -->
    <u-notify ref="uNotify"></u-notify>
    <!-- 模态框提示 -->
    <u-modal
      :show="showDel"
      :title="titleDel"
      :content="contentDel"
      @cancel="cancelDel"
      @confirm="confirmDel"
      showCancelButton
    ></u-modal>
  </div>
</template>
<script>
export default {
  onShow() {
    this.$u.auth.check()
    //获取本地存储的信息
    let LoginUser = uni.getStorageSync('LoginUser')

    this.LoginUser = LoginUser

    this.AddressIndex()
  },
  data() {
    return {
      active: 0,
      LoginUser: null,
      AddressList: [],
      addressBtn: {
        position: 'fixed',
        left: '0',
        bottom: '0',
        width: '100%',
        backgroundColor: '#4ea9f5',
        borderRadius: '0px',
        color: '#fff',
      },
      showDel: false,
      titleDel: '删除收货地址',
      contentDel: '是否删除选中的收货地址',
      addressId: 0
    }
  },
  methods: {
    async AddressIndex() {
      let data = {
        userid: this.LoginUser.id
      }
      let result = await this.$u.api.user.addressIndex(data)
      // console.log(result);
      if (result.data.length < 0) {
        this.$refs.uNotify.show({
          type: 'error',
          message: '暂无收货地址',
          duration: 1500
        })
        return false
      }

      // console.log(result.data)
      for (let item of result.data) {
        if (item.status == 1) {
          this.active = item.id
        }
      }

      this.AddressList = result.data
    },
    async groupChange(item) {
      // console.log(item)
      let data = {
        userid: this.LoginUser.id,
        id: item
      }
      let result = await this.$u.api.user.selected(data)

      if (result.code === 0) {
        this.$refs.uNotify.show({
          type: 'error',
          message: result.msg,
          duration: 1500
        })
        return false
      }

      this.AddressIndex()
    },
    addressadd() {
      this.$u.route({
        url: '/pages/address/addressadd',
        type: 'navigateTo'
      })
    },
    cancelDel() {
      this.showDel = false
    },
    addressDel(addressId) {
      // console.log(addressId);
      this.addressId = addressId
      this.showDel = true
    },
    cancelDel() {
      this.showDel = false
    },
    async confirmDel() {
      // console.log(this.addressId);
      this.showDel = false
      let data = {
        addrid: this.addressId
      }

      let result = await this.$u.api.user.addressDel(data)

      if (result.code === 1) {
        this.$refs.uNotify.show({
          type: 'success',
          message: result.msg,
          duration: 1500
        })
        this.AddressIndex()
        return false
      } else {
        this.$refs.uNotify.show({
          type: 'error',
          message: result.msg,
          duration: 1500
        })
        return false
      }
    },
    addressEdit(id) {
      this.$u.route({
        url: `/pages/address/addressedit?addr=${id}`,
        type: 'navigateTo'
      })
    }
  },
}
</script>
<style>
/* 列表 */
.list {
  padding-bottom: 46px;
}
.list .item {
  margin: 20rpx 0;
  padding: 30rpx 20rpx;
  box-shadow: 0 0 20px #ccc;
  font-size: 32rpx;
}

.list .header {
  display: flex;
  justify-content: space-between;
}

.list .city {
  margin: 20rpx 0;
}

.btn-box {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}

.right-btn {
  display: flex;
  align-items: center;
}

.right-btn .edit,
.right-btn .del {
  margin-right: 20rpx;
  display: flex;
}

.right-btn span:first-child {
  width: 35rpx;
  height: 35rpx;
  display: block;
  margin-right: 10rpx;
}

.right-btn span image {
  width: 100%;
  height: 100%;
}

.right-btn .edit span:last-child {
  color: #4ea9f5;
}

.right-btn .del span:last-child {
  color: red;
}

/* 修改单选按钮 */
radio .wx-radio-input {
  width: 35rpx;
  height: 35rpx;
}

radio .wx-radio-input.wx-radio-input-checked {
  width: 35rpx;
  height: 35rpx;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
  font-size: 30rpx;
}
</style>